/**
* Created by wl
* 基金储备库-编辑头部信息
*/
<template>
    <div  class="ca-box ca-p-20" :class="{'ca-m-t-28': $route.name.includes('add')}">
        <div class="ca-align-right" v-if="$route.params.itemId != '-1' && !$route.name.includes('add')">
            <el-button type="primary" size="small" @click="save()">保存</el-button>
            <el-button size="small" @click="cancel()">取消</el-button>
        </div>
        <el-form ref="form1" label-width="150px" :model="fundEntity" :rules="rules">
            <el-row>
                <el-col :span="8">
                    <el-form-item label="基金全称：" label-width="140px" prop="fundFullname">
                        <el-input style="width:100%" v-model="fundEntity.fundFullname" :maxlength="100"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="基金简称：" label-width="120px" prop="fundName">
                        <el-input style="width:100%" v-model="fundEntity.fundName" :maxlength="100"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="基金类型：" label-width="120px">
                        <el-select v-model="fundEntity.fundType" style="width: 100%;">
                            <el-option label="请选择" value=''></el-option>
                            <el-option
                            v-for="item in fundType"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="拟设立规模(万元)：" label-width="140px">
                        <el-input type="number" style="width:100%" v-model="fundEntity.fundScale"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="基金经理：" labelWidth="120px" required>
                        <el-select v-model="fundManager"
                                    @change="changeManager(fundManager)"
                                    filterable placeholder="请选择"
                                    style="width:100%;">
                            <el-option
                                v-for="item in userEntityList"
                                :key="item.id"
                                :label="item.userName"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="拟设立日期：" label-width="120px">
                        <el-date-picker
                        type="date"
                        placeholder="选择日期"
                        style="width:100%"
                        v-model="fundEntity.establishTime">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="22">
                    <el-form-item label="项目组成员：" label-width="140px" required>
                       <el-row :gutter="3">
                           <el-col :span="5">
                               <el-select v-model="userTeamItem"
                                    @change="changeUserTeam"
                                    filterable placeholder="选择用户"
                                    style="width:100%;">
                                    <el-option
                                        v-for="item in userEntityList"
                                        :key="item.id"
                                        :label="item.userName"
                                        :value="item.id">
                                    </el-option>
                                </el-select>
                           </el-col >
                           <el-col :span="16" class="ca-m-t-8 ca-m-l-10">
                                <el-tag
                                    v-for="item in fundUserTeam"
                                    :key="item.id"
                                    :closable="true"
                                    :close-transition="false"
                                    @close="closeUserItem(item)"
                                    :type="item.type" class="ca-m-r-10">
                                    {{item.userName}}
                                </el-tag>
                            </el-col>
                       </el-row>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="30">
                <el-col :span="8">
                    <el-form-item label="投资期（年）：" label-width="140px" prop="investmentPeriod">
                        <el-input type="number" style="width:100%" v-model="fundEntity.investmentPeriod"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="退出期（年）：" label-width="120px" prop="exitPeriod">
                        <el-input type="number" style="width:100%" v-model="fundEntity.exitPeriod"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="22">
                    <el-form-item label="母基金：" label-width="140px" required v-if="FOF">
                       <el-row :gutter="3">
                           <el-col :span="5">
                               <el-select v-model="fundMother" style="width: 100%;" placeholder="选择母基金" @change="selectMother">
                                    <el-option
                                    v-for="item in fundMotherList"
                                    :key="item.id"
                                    :label="item.fundName"
                                    :value="item.id"
                                    ></el-option>
                                </el-select>
                           </el-col >
                           <el-col :span="16" class="ca-m-t-8 ca-m-l-10">
                                <el-tag
                                    v-for="(item, index) in motherList"
                                    :key="index"
                                    :closable="true"
                                    :close-transition="false"
                                    @close="closeMotherItem(index)"
                                    class="ca-m-r-10">
                                    {{item}}
                                </el-tag>
                            </el-col>
                       </el-row>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="22">
                     <el-form-item label="投资行业：" labelWidth="140px">
                        <el-row :gutter="3">
                           <el-col :span="5">
                                <el-select v-model="industry"
                                            @change="changeIndustry"
                                            placeholder="请选择"
                                            style="width:100%">
                                    <el-option
                                        v-for="item in industrySelect"
                                        :label="item.name"
                                        :key="item.id"
                                        :value="item.id"
                                    ></el-option>
                                </el-select>
                            </el-col>
                            <el-col :span="16" class="ca-m-l-20 ca-m-t-8">
                                <el-tag
                                    v-for="item in industryList"
                                    :key="item.id"
                                    :closable="true"
                                    :close-transition="false"
                                    @close="closeIndustry(item)"
                                    :type="item.type" class="ca-m-r-10">
                                    {{item.industry | getNameById('industry')}}
                                </el-tag>
                            </el-col>
                        </el-row>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>
<script type="text/ecmascript-6">
    import {api} from '../api';
    import {STATUS_HTTP_SUCCESS, apiHttp} from '__service/csHttp';
    export default {
        data() {
            return {
                userEntityList: this.$store.state.user.department.userEntityList, //用户
                fundType: this.$store.state.user.dictionaryMap.fundType, //基金类型
                industrySelect: this.$store.state.user.dictionaryMap.industry, //投资方向
                fundMotherList: [], //母基金数组
                motherList: [], //已添加的数组
                fundMother: '', //母基金
                fundEntity: {
                    establishTime: '', //拟设立日期(或 成立时间 )
                    exitPeriod: '', //退出期
                    exitTime: '', //退出时间
                    fundCategory: '', //基金类别
                    fundFullname: '', //基金全称
                    fundName: '', //基金简称
                    fundScale: null, //基金规模(或 拟设立规模)
                    fundState: this.fundState, //设立状态：0：拟设立，1：已设立，2：退出中,3：已到期,4:母基金 对应字典表（d_type=fundState）
                    fundType: '', //基金类型:对应字典表（d_type=fundType）
                    id: '', //基金主id
                    investmentPeriod: '', //投资期
                    treeType: '1' //1：子基金；2：母基金 对应字典表：fundTree
                },
                fundUserList: [], //基金经理和基金团队
                fundMotherSonList: [], //投资母基金
                fundManager: '', //基金经理
                fundManagerInfo: {
                    fundId: '', //基金主id
                    id: '', //主id
                    userId: '', //用户id
                    userName: '', //用户名称
                    userType: 1 //用户类型：1：基金经理；2：基金管理团队
                },
                fundUserTeam: [], // 基金管理团队
                industry: '', // 投资方向
                industryList: [], // 投资方向
                userTeamItem: '', // 管理团队成员
                rules: {
                    fundFullname: [
                        { required: true, message: '请输入基金全称', trigger: 'blur' },
                    ],
                    fundName: [
                        { required: true, message: '请输入基金简称', trigger: 'blur' },
                    ],
                    investmentPeriod: [
                        { required: true, message: '请输入投资期为正整数', trigger: 'blur' },
                        { validator: this.checkIntegerNumber, message: '请输入投资期为正整数', trigger: 'blur'}
                    ],
                    exitPeriod: [
                        { required: true, message: '请输入投资期为正整数', trigger: 'blur' },
                        { validator: this.checkIntegerNumber, message: '请输入退出期为正整数', trigger: 'blur' }
                    ],
                },
            }
        },
        created() {
        },
        mounted() {
            this.$emit('fundEntity', this.fundEntity);
            this.$emit('fundUserList', this.fundUserList);
            this.$emit('fundMotherSonList', this.fundMotherSonList);
            this.$emit('industryList', this.industryList);
            if (this.$route.params.itemId && this.$route.params.itemId !== '-1') {
                this.getHeaderInfo()
            }
            this.getFundMother()
        },
        props: {
            fundState: {
                type: Number,
                default: function () {
                    return 6;
                }
            },
        },
        watch: {
            // 深度 watcher
            fundEntity: {
                handler: function (fundEntity) {
                    this.$emit('fundEntity', fundEntity);
                },
                deep: true
            },
            fundUserList: {
                handler: function (fundUserList) {
                    this.$emit('fundUserList', fundUserList);
                },
                deep: true
            },
            fundMotherSonList: {
                handler: function (fundMotherSonList) {
                    this.$emit('fundMotherSonList', fundMotherSonList);
                },
                deep: true
            },
            industryList: {
                handler: function (industryList) {
                    this.$emit('industryList', industryList);
                },
                deep: true
            },
        },
        methods: {
            cancel() {
                this.$emit('close')
            },
            // 获取母基金
            getFundMother() {
                apiHttp(api.MOTHERFUD_LIST, {fundState: '4'}).then(ret => {
                    if (ret.resCode === STATUS_HTTP_SUCCESS) {
                        this.fundMotherList = ret.data
                    }
                })
            },
            // 获取详情
            getHeaderInfo() {
                apiHttp(api.CHECK_HEADERINFO, {fundId: this.$route.params.itemId}).then(ret=> {
                    if (ret.resCode === STATUS_HTTP_SUCCESS) {
                        this.fundEntity = ret.data.fundEntity
                        this.fundMotherSonList = ret.data.fundMotherSonList
                        this.fundUserList = ret.data.fundUserList
                        this.industryList = ret.data.industryList;//投资方向
                        // 获取基金经理和基金成员
                        if (this.fundUserList.length > 0) {
                            this.fundUserList.map(item => {
                                if (item.userType === '1') {
                                    this.fundManager = item.userName
                                    this.fundManagerInfo = item
                                } else {
                                    this.fundUserTeam.push(item)
                                }
                            })
                        }
                        this.motherList = []
                        // 获取母基金
                        if (this.fundMotherSonList.length > 0) {
                            this.fundMotherList.map( fundItem => {
                                this.fundMotherSonList.map( value => {
                                    if (fundItem.id === value.fundMotherId) {
                                        this.motherList.push(fundItem.fundName)
                                    }
                                })
                            })
                        }
                    }
                })
            },
            // 保存
            save() {
                if (!this.fundManager) {
                    this.$message.error('请选择基金经理')
                    return false
                }
                if (this.fundUserTeam.length <= 0) {
                    this.$message.error('请选择项目组成员')
                    return false
                }
                if (this.FOF) {
                    if (this.fundMotherSonList.length <= 0) {
                        this.$message.error('请选择母基金')
                        return false
                    }
                }
                this.$refs.form1.validate((valid) => {
                    if (valid) {
                        let query = {
                            fundEntity: this.fundEntity,
                            fundMotherSonList: this.fundMotherSonList,
                            fundUserList: this.fundUserList,
                            industryList: this.industryList,
                        }
                        apiHttp(api.SAVE_HEADERINFO, query).then(ret=> {
                            if (ret.resCode === STATUS_HTTP_SUCCESS) {
                                this.$message({
                                    message: '数据保存成功！',
                                    type: 'success',
                                    center: true
                                });
                                this.$emit('update')
                            }
                        })
                    } else {
                        return false;
                    }
                });
            },
            //添加基金经理
            changeManager(val) {
                let userName = '';
                this.userEntityList.map( item => {
                    if (item.id === val) {
                        userName = item.userName
                    }
                })
                this.fundManagerInfo.userId = val;
                this.fundManagerInfo.userName = userName;
                this.fundUserList = [this.fundManagerInfo, ...this.fundUserTeam]
            },
            //关闭管理团队
            closeUserItem(tag) {
                this.fundUserTeam.splice(this.fundUserTeam.indexOf(tag),1);
                this.fundUserList = [this.fundManagerInfo, ...this.fundUserTeam]
            },
            //添加管理团队
            changeUserTeam(item) {
                let flag = false;
                // 在团队中筛选
                for (let i of this.fundUserTeam) {
                    if (i.userId === item) {
                        flag = true;
                        this.userTeamItem = ''
                        return;
                    }
                }
                if (!flag) {  //true 才push
                    for (let i of this.userEntityList) {
                        if (item === i.id) {
                            this.fundUserTeam.push({fundId: '', id: '', userName: i.userName, userType: 2, userId: i.id})
                        }
                    }
                }
                this.fundUserList = [this.fundManagerInfo, ...this.fundUserTeam]
                this.userTeamItem = ''
            },
            // 添加母基金
            selectMother(item) {
                let flag = false;
                // 在团队中筛选
                for (let i of this.fundMotherSonList) {
                    if (i.fundMotherId === item) {
                        flag = true;
                        this.fundMother = ''
                        return;
                    }
                }
                if (!flag) {  //true 才push
                    for (let i of this.fundMotherList) {
                        if (item === i.id) {
                            this.fundMotherSonList.push({fundSonId: '', id: '', fundMotherId: i.id})
                        }
                    }
                    // 母基金名称数组
                    this.fundMotherList.map(fund => {
                        if (fund.id === item) {
                            this.motherList.push(fund.fundName)
                        }
                    })
                }
                this.fundMother = ''
            },
            // 关闭母基金
            closeMotherItem(index) {
                this.fundMotherSonList.splice(index,1);
                this.motherList.splice(index, 1);
            },
            //添加投资方向tag
            changeIndustry(industryItem) {
                let flag = false;
                for (let i of this.industryList) {
                    if (i.industry === industryItem) {
                        flag = true;
                        return;
                    }
                }
                if (!flag) {
                    this.industryList.push({industry: industryItem,fundId: this.itemId,id: ''})
                }
            },
            //关闭投资方向tag
            closeIndustry(tag) {
                this.industryList.splice(this.industryList.indexOf(tag),1);
            },
            //验证
            validateAdd() {
                let isSave = null;
                this.$refs.form1.validate((valid) => {
                    if (valid) {
                        isSave = true;
                    } else {
                        isSave = false;
                    }
                })
                return isSave;
            },
        },
        components: {
            'csHeader': require('./edit.vue'),//头部edit页
        },
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.ca-align-right {
    text-align: right;
    padding-bottom: 10px;
    margin-top: 10px;
}
</style>
        